@import "base/global";
@import "comptents/head";
@import "comptents/dialogForLayer";
@import "comptents/nav";
@import "comptents/layform";
.filter {
  padding: 30px 0;
  .f-item {
    display: inline-block;
    width: 123px;
    margin-right: 21px;
    &.h {
      width: 160px;
    }
  }
  .bigText {
    font-size: 18px;
    height: 26px;
    margin-right: 30px;
    .text {
      margin-right: 3px;
    }
    .top {
       height: 13px;
       width: 20px;
       position: relative;
       &.active {
         .edgeUp {
           border-bottom-color: $color-primary;
         }
       }
      .edgeUp {
        border-style: dashed;
        border-color:transparent;
        cursor: pointer;
        border-width: 6px;
        border-bottom-color: #c2c2c2;
        border-bottom-style: solid;
        position: absolute;
        left: 4px;
        bottom: 2px;
      }
    }
    .bottom {
      height: 13px;
      width: 20px;
      position: relative;
      &.active {
        .edgeDown {
          border-top-color: $color-primary;
        }
      }
      .edgeDown {
        border-style: dashed;
        border-color:transparent;
        cursor: pointer;
        border-width: 6px;
        border-top-color: #c2c2c2;
        border-top-style: solid;
        position: absolute;
        left: 4px;
        bottom: -1px;
      }
    }
  }
}

#works {
  .row {
    margin-left: -20px;
    margin-right: -20px;
    .item {
      float:left;
      margin: 0 20px 12px;
      padding-bottom: 26px;
      width: 300px;
      overflow: hidden;
      position: relative;
      .collect {
        position: absolute;
        width: 40px;
        height: 40px;
        //background: red;
        text-align: center;
        line-height: 40px;
        right:10px;
        top:10px;
        cursor: pointer;
        font-size: 30px;
        color:$color-primary;
      }
      .imgBox {
        width: 100%;
        height: 210px;
        border-radius: $bor-radius-dia2;
        overflow: hidden;
      }
      .info {
        width: 100%;
        padding: 16px 13px 0 13px;
        position: relative;
        .tip {
          position: absolute;
          height: 28px;
          width: 110px;
          line-height: 27px;
          color:#fff;
          background-image: url("../img/bg-award.png");
          background-repeat: no-repeat;
          text-align: center;
          bottom: 75px;
          right: 0;
          font-size: 14px;
          &.disable {
            background-color: #d9d9d9;
            color:$text-color-inverse;
            background-image: url("../img/index-text-head-end.png");
          }
        }
        .title {
          color:$text-color;
          font-weight: 600;
          font-size: 16px;
          margin-bottom: 14px;
          width: 100%;
        }
        .m-title {
          color:$text-color;
          font-size: 15px;
          margin-bottom: 12px;
        }
        .l-title {
          font-size: 14px;
          color:$text-grey;
        }
      }
      .tpBtn {
        width: 100%;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        background: $color-primary;
        color:#fff;
        text-align: center;
        border-radius: 6px;
        cursor: pointer;
        &:hover {
          background: #ff2e2e;
        }
        &.disable {
          background: #e7d8d8;
          cursor: default;
        }
      }
    }
  }
  .page {
    height: 150px;
  }
}
